<template>
	<view class="main">
		<!-- 头部导航栏 -->
		<!-- <u-navbar :is-back="false" title="小春云众包" title-color="#fff" :background="background" :titleBold="true">
			<view class="slot-wrap">
				<u-icon name="search" @click="search"></u-icon>
			</view>
		</u-navbar> -->
		<!-- 表单搜索模块 -->
		<view class="select">
			<u-dropdown>
				<u-dropdown-item v-model="time" :title="timeT" :options="times" @change="timeChange">
				</u-dropdown-item>
				<u-dropdown-item v-model="requirment" :title="requirmentT" :options="requirments"
					@change="requirmentChange"></u-dropdown-item>
				<u-dropdown-item v-model="cycle" :title="cycleT" :options="cycles" @change="cycleChange">
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- 项目列表 -->
		<view v-if="proList.length != 0" style="padding: 20rpx">
			<view v-for="(item,index) in proList">
				<projectName :data="item"></projectName>
			</view>
		</view>
		<view v-else>
			<u-divider style="padding: 200rpx 0;">暂无数据</u-divider>
		</view>
	</view>
</template>

<script>
	import projectName from "@/pages/list/component/projectName.vue"
	export default {
		components: {
			projectName
		},
		data() {
			return {
				time: "",
				requirment: "",
				cycle: "",
				timeT: "发布状态",
				requirmentT: "技术要求",
				cycleT: "项目周期",
				proList: [],
				background: {
					background: '#1890ff'
				},
				times: [{
						label: "全部",
						value: "all"
					},
					{
						label: "投标中",
						value: "normal"
					},
				],
				requirments: [{
						label: "web前端",
						value: "web"
					},
					{
						label: "UI设计师",
						value: "UI"
					}, {
						label: "PHP",
						value: "PHP"
					}, {
						label: "Python",
						value: "Python"
					}, {
						label: "安卓",
						value: "arduous"
					}, {
						label: "IOS",
						value: "IOS"
					}, {
						label: "C语言/C++",
						value: "C"
					}, {
						label: "JAVA",
						value: "JAVA"
					},
				],
				cycles: [{
						label: "0-7天",
						value: "7"
					},
					{
						label: "7-15天",
						value: "15"
					},
					{
						label: "16-30天",
						value: "30"
					},
					{
						label: "30天以上",
						value: "40"
					},
				],
				quarylist: {
					status:"", // 发布状态
					cycletime:"", // 周期
					position_id:'', // 岗位
					name: "",
					page: 1,
					page_size: 10
				}
			}
		},
		methods: {
			// 格式化筛选条件
			filterFormat(){
				this.quarylist.status= ""
				this.quarylist.cycletime= ""
				this.quarylist.position_id= ""
				this.timeT= "发布状态"
				this.requirmentT= "技术要求"
				this.cycleT= "项目周期"
			},
			// 数据格式化
			dataFormate(){
				this.quarylist.page = 1
				this.proList = []
			},
			// 获取岗位筛选列表
			getPostListOfFiler() {
				this.$u.api.getSkillList().then(res => {
					const postList = res.data.map(item => {
						return {
							label: item.name,
							value: item.id
						}
					})
					this.requirments = postList
				})
			},
			// 切换时间
			timeChange(value) {
				this.dataFormate()
				let title = this.times.filter(item => item.value === value)
				this.timeT = title[0].label
				this.quarylist.status = title[0].value
				this.getData()
			},
			// 切换技术要求
			requirmentChange(value) {
				this.dataFormate()
				let title = this.requirments.filter(item => item.value === value)
				this.requirmentT = title[0].label
				this.quarylist.position_id = title[0].value
				this.getData()
			},
			// 周期切换
			cycleChange(value) {
				this.dataFormate()
				let title = this.cycles.filter(item => item.value === value)
				this.cycleT = title[0].label
				this.quarylist.cycletime = title[0].value
				this.getData()
			},
			
			// 得到全部数据
			getData(callback) {
				this.$u.api.getProList(this.quarylist).then(res => {
					this.proList = [...this.proList, ...res.data]
					callback && callback()
				})
			}
		},
		created() {
			this.getPostListOfFiler()
		},
		onLoad(options) {
			if (options) {
				this.quarylist.name = options.name
			}
			this.getData()
		},
		// 触底
		onReachBottom() {
			this.quarylist.page++
			this.getData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.quarylist.page = 1
			this.proList = []
			this.filterFormat()
			this.getData(() => {
				uni.stopPullDownRefresh()
			})
		}



	}
</script>

<style scoped lang="scss">
	.main {
		background-color: #f5f5f5;
		height: 100%;
	}

	.select {
		border-top: 1rpx solid rgba($color: #000000, $alpha: .1);
		background-color: white
	}

	.slot-wrap {
		display: flex;
		flex-direction: row-reverse;
		color: #FFFFFF;
		font-size: 36rpx;
		justify-content: space-between;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 40rpx;
	}
</style>
